<template>
    <el-tabs tab-position="right">
        <el-tab-pane>
            <template #label>
                <div class="tabpanel-title">
                    <div class="icon">
                        <el-icon>
                            <Document />
                        </el-icon>
                    </div>
                    <p class="text">课程</p>
                </div>
            </template>
            <div class="title">我是左边的课程</div>
        </el-tab-pane>
        <el-tab-pane>
            <template #label>
                <div class="tabpanel-title">
                    <div class="icon">
                        <el-icon>
                            <Document />
                        </el-icon>
                    </div>
                    <p class="text">章节</p>
                </div>
            </template>
            <div class="title">我是左边的章节</div>
        </el-tab-pane>
        <el-tab-pane class="note">
            <template #label>
                <div class="tabpanel-title">
                    <div class="icon">
                        <el-icon>
                            <Document />
                        </el-icon>
                    </div>
                    <p class="text">笔记</p>
                </div>
            </template>
            <div class="title">我是左边的笔记</div>
        </el-tab-pane>
    </el-tabs>
</template>
<script setup>
import { ArrowLeftBold, Document } from "@element-plus/icons-vue";
</script>
<style scoped>
>>>.el-tabs__item {
    padding: unset !important;
    width: 80px !important;
    height: 100px !important;
}

>>>.el-tabs__nav-wrap::after {
    background: unset !important;
}

>>>.el-tabs__active-bar.is-right {
    width: 0 !important;
}

>>>.el-tabs__item.is-active .tabpanel-title {
    background: #25282a !important;
}

>>>.el-tabs__item.is-active .tabpanel-title .icon,
.el-tabs__item.is-active .tabpanel-title .text {
    color: #ffffff;
}

>>>.el-tabs__nav.is-right {
    padding: 20px 0;
    background: #1c1f21 !important;
}

>>>.el-tabs--right,
>>>.el-tabs__content,
>>>.el-tab-pane {
    height: 100%;
}

>>>.vjs-custom-skin>.video-js .vjs-big-play-button {
    background-color: rgba(0, 0, 0, 0.45);
    position: absolute;
    bottom: 60px;
    left: 20px;
    font-size: 3.5em;
    line-height: 2em !important;
    margin-left: unset;
    top: unset;
}


.tabpanel-title {
    padding: 17px 0 18px 0;
    width: 100%;
    text-align: center;
}

.tabpanel-title .icon {
    height: 40px;
    font-size: 30px;
    line-height: 40px;
    color: #A4A5A6;
}

.tabpanel-title .text {
    height: 25px;
    line-height: 25px;
    color: #A4A5A6;
}

.title {
    width: 1000px;
    height: 100px;
    background: pink;
}
</style>